<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js" charset="utf-8"></script>
    <link rel="stylesheet" href="animate/animate.css">

</head>
<body>

<div id="app">
    <input type="button" value="按钮" @click="toggle" >
    <br>
    <transition name="bounce">
        <div id="div1" v-show="bSign"></div>

    </transition>
</div>


<script>
    new Vue({
        el:'#app',
        data:{
            msg:"asdasd",
            bSign:true
        },
        methods:{
            toggle(){
                this.bSign=!this.bSign
            }
        },
        transitions:{
            bounce:{
                enterClass:'zoomInLeft',
                leaveClass:'zoomOutRight'
            }
        }
    })
</script>

<style>
    #app{
        width: 400px;
        margin: 0 auto;
    }
    #div1{
        width: 100px;
        height: 100px;
        background: red;
    }
</style>

</body>
</html>